<template>
    <div>
        <div class="homeTop">
            <div class="topfix">
                <div class="topfl">
                    <img :src="logo" alt="">
                </div>
            </div>
        </div>
        <ul class="title_ul">
            <li class="home_title"><router-link to="/home">推荐音乐</router-link></li>
            <li class="home_title"><router-link to="/hotSongRank">排行榜</router-link></li>
            <li class="home_title"><router-link to="/search">搜索</router-link></li>
        </ul>
        <router-view></router-view>
        <div class="homeBottom" v-if="id !== 0">
            <div class="bottomfix" @click="toPlayer(id,songArr,songArrIndex)">
                <div class="bleft">
                    <div class="song_img"><img :src="detail[0].al.picUrl" alt=""></div>
                    <div class="songn_title">
                        <p class="singername">{{detail[0].name}}</p>
                        <p class="arname">{{detail[0].ar[0].name}}</p>
                    </div>
                </div>
                <div class="bright">
                    <!-- 播放器按钮 -->
                    <div class="playBtns">
                        <div class="Pbtns prev_btn">
                            <i class="iconfont icon-shangyishou" @click.stop="prevSong(songArr)"></i>
                        </div>
                        <div class="Pbtns play_btn">
                            <i class="iconfont" @click.stop="playOrPause()" :class="{'icon-bofang1':!playState,'icon-pause': playState}"></i>
                        </div>
                        <div class="Pbtns next_btn">
                            <i class="iconfont icon-xiayishou" @click.stop="nextSong(songArr)"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                logo:"./static/logo.png",
                playState : false,
                id:0,
                songArr:0,
                songArrIndex:0,
                detail:[],
            }
        },
        mounted(){
            this.playState = this.$store.state.playState;
            this.id =  this.$store.state.msg;
            this.songArr = this.$store.state.list;
            this.songArrIndex = this.$store.state.listIndex;
            console.log(this.songArr);
            console.log(this.songArrIndex);
            if(this.id !== 0) {
                this.getSong(this.id);
            }
            this.sound = document.getElementById("sound");
            if(this.songArr !== undefined){
                this.sound.addEventListener("ended",()=>{
                    this.nextSong();
                })
            }
        },
        methods:{
            // 播放暂停按钮
            playOrPause(){
                // vuex中的状态决定播放还是暂停
                if( this.playState == true ){
                    // 暂停
                    // this.$refs.audio.pause();
                    this.sound.pause();
                    this.text = "播放";
                }else{
                    // 播放
                    // this.$refs.audio.play();
                    this.sound.play();
                    this.text = "暂停";
                }
                if(this.hassonglrc){
                    this.songlrc.togglePlay();
                }
                this.$store.state.playState = !this.$store.state.playState;
                this.playState = this.$store.state.playState;
            },
            // 获取歌曲详情
            getSong(id){
                this.axios.get("song/detail?ids="+ id).then(
                    (res)=>{
                        console.log("歌曲详情",res.data.songs);
                        this.detail = res.data.songs;
                    }
                );
            },
            // 上一首
            prevSong(){
                if(this.songArrIndex == 0){
                    this.songArrIndex = this.songArr.length;
                }
                this.id = this.songArr[ --this.songArrIndex ].id;
                this.$store.state.msg = this.id;
                this.$store.state.listIndex = this.songArrIndex;
                this.changeSong();
            },
            // 下一首
            nextSong(){
                if(this.songArrIndex == this.songArr.length-1){
                    this.songArrIndex = -1;
                }
                this.id = this.songArr[ ++this.songArrIndex ].id;
                this.$store.state.msg = this.id;
                this.$store.state.listIndex = this.songArrIndex;
                this.changeSong();
            },
            // 换歌
            changeSong(){
                this.getSong(this.id);
                this.play(this.id);
                this.playState = true;
                this.$store.state.playState = this.playState ;
            },
            // 播放
            play(id){
                this.axios.get("music/url?id="+ id).then(
                    (res)=>{
                        try {
                            // 因为后台接口改了 下面的方法用不了 要换字符串拼接的方法
                            // this.$refs.audio.src += res.data.data[0].url;
                            // this.$refs.audio.src="http://music.163.com/song/media/outer/url?id=";
                            // this.$refs.audio.src += id+".mp3";

                            this.sound.src="http://music.163.com/song/media/outer/url?id="+ id+".mp3";
                        }catch (e){
                            console.log(e)
                        }
                        this.sound.play();
                    }
                );
            },
        }
    }
</script>

<style scoped lang="scss">
    .homeTop{
        height: 16vw;
        .topfix{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #d33c33;
            z-index: 100;
            .topfl{
                width: 43vw;
                height: 14vw;
                float: left;
                padding: 0 10px;
                img{
                    padding-top: 1vw;
                    width: 100%;
                }
            }
        }
    }
    .title_ul{
        position: fixed;
        top: 14vw;
        left: 0;
        right: 0;
        z-index: 100;
        border-bottom: 1px solid #9c9c9c;
        background-color: #fff;
        .home_title{
            width: 33.3%;
            height: 100%;
            float: left;
            text-align: center;
            cursor: pointer;
            line-height: 40px;
            vertical-align: middle;
            a{
                color: #333;
            }
        }
        .router-link-active{
            padding-bottom: 2vw;
            border-bottom: 2px solid #d33c33;
            color: #d33c33;
        }
    }
    .homeBottom{
        height: 16vw;
        .bottomfix{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            padding: 2vw;
            .bleft{
                display: flex;
                justify-content: space-between;
                margin-left: 5vw;
                .song_img{
                    width: 10vw;
                    height: 10vw;
                    margin-right: 4vw;
                    img{
                        width: 100%;
                    }
                }
                .songn_title{
                    text-align: left;
                    font-size: 14px;
                    .singername{
                        color: #333;
                    }
                    .arname{
                        color: #888;
                    }
                }
            }
            .bright{
                margin-right: 6vw;
                .playBtns{
                    display: flex;
                    justify-content: space-between;
                    .Pbtns{
                        font-size: 16px;
                        display: inline-block;
                        width: 10vw;
                        height: 10vw;
                        line-height: 10vw;
                        text-align: center;
                        vertical-align: middle;
                        i{
                            color: #515151;
                            font-size: 28px;
                        }
                    }
                    .play_btn{
                        padding: 0 1vw;
                        i{
                            font-size: 28px;
                        }
                        .icon-pause{
                            font-size: 35px;
                        }
                    }
                }
            }
        }
    }

</style>